<template>
    <div class="common-table">
        <div class="fixed-table-container" ref='cor-table'  style="height:200px">
            <div class="fixed-table-header" ref='fix-header' style="margin-right: 0px;">
                <table class="table table-bordered table table-hover" ref='nav-table'><thead ref='nav-head'></thead></table>
            </div>
            <div class="fixed-table-body" ref='fix-body'>
                <!--<div class="fixed-table-loading">Loading, please wait...</div>-->
                <table class="table table-striped table-hover" ref='table'>
                    <slot name='thead'></slot>
                    <slot name='tbody'></slot>
                    <slot name='tfoot'></slot>
                </table>
            </div>
            <div class="fixed-table-pagination" style="display: none;"></div>
        </div>
        <slot></slot>
        <div class="clearfix"></div>
    </div>
</template>
<script>
    import {each} from '../../utils/index'
    export default{
        name:'CTable',
        data(){
            return{
                
            }
        },
        mounted(){
            this.init();
        },
        methods:{
          init(){
              const cor_el = this.$el;
              const cor_table = this.$refs['cor-table'];
              const nav_table = this.$refs['nav-table'];
              const nav_head = this.$refs['nav-head'];
              const show_table = this.$refs['table'];
              const t_head = this.$slots['thead']&&this.$slots['thead'][0].elm;
              const t_body = this.$slots['tbody']&&this.$slots['tbody'][0].elm;
              //设置显示头部table宽度
              let t_body_width = $(show_table).width();
              console.log(t_body_width);
              $(nav_table).width(t_body_width);
              //设置显示头部thead高度
              let t_head_height = $(t_head).height();
              //$(nav_table).height(t_head_height+'px');
              $(cor_el).css({'padding-bottom':(t_head_height)+'px'});
              $(cor_table).css({'padding-bottom':(t_head_height)+'px'});
              $(show_table).css({'margin-top':(-t_head_height)+'px'});
              //设置显示table的thead内容dom
              const t_head_th = $(t_head).find('th');
              let t_head_dom= $($(t_head).html());
              let t_head_th_dom= t_head_dom.find('th');
              t_head_th.each((i,v)=>{
                  const w = $(v).width();
                  $(t_head_th_dom[i]).append(`<div style="width: ${w}px;"></div>`)
              });
              $(nav_head).append(t_head_th_dom);
              const fix_header = this.$refs['fix-header'];
              const _$fix_header = $(fix_header);
              const fix_body = this.$refs['fix-body'];
              _$fix_header.css({'margin-right':($(fix_body).width()-fix_body.clientWidth)+'px'});
              $(fix_body).on('scroll',(e)=>{
                  _$fix_header.scrollLeft(e.target.scrollLeft);
              })
          }
        },
        components:{
        }
    }
</script>
<style lang="scss">
    /**
 * @author zhixin wen <wenzhixin2010@gmail.com>
 * version: 1.12.1
 * https://github.com/wenzhixin/bootstrap-table/
 */
    .common-table .table {
        margin-bottom: 0 !important;
        border-bottom: 1px solid #dddddd;
        border-collapse: collapse !important;
        border-radius: 1px;
    }
    .common-table .table:not(.table-condensed),
    .common-table .table:not(.table-condensed) > tbody > tr > th,
    .common-table .table:not(.table-condensed) > tfoot > tr > th,
    .common-table .table:not(.table-condensed) > thead > tr > td,
    .common-table .table:not(.table-condensed) > tbody > tr > td,
    .common-table .table:not(.table-condensed) > tfoot > tr > td {
        padding: 8px;
    }
    .common-table .table.table-no-bordered > thead > tr > th,
    .common-table .table.table-no-bordered > tbody > tr > td {
        border-right: 2px solid transparent;
    }
    .common-table .table.table-no-bordered > tbody > tr > td:last-child {
        border-right: none;
    }
    .fixed-table-container {
        position: relative;
        clear: both;
        border: 1px solid #dddddd;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
    }
    .fixed-table-container.table-no-bordered {
        border: 1px solid transparent;
    }
    .fixed-table-footer,
    .fixed-table-header {
        border-bottom: 1px solid #dddddd;
        overflow: hidden;
        .table{
            border: none;
            th{
                border-top: none;
                border-bottom: none;
                &:last-child{
                    border-right: none;
                }
            }
        }
    }
    .fixed-table-footer {
        border-top: 1px solid #dddddd;
    }
    .fixed-table-body {
        overflow-x: auto;
        overflow-y: auto;
        height: 100%;
    }
    .fixed-table-container table {
        width: 100%;
    }
    .fixed-table-container thead th {
        height: 0;
        /*padding: 0;
        margin: 0;*/
        border-left: 1px solid #dddddd;
    }
    .fixed-table-container thead th:focus {
        outline: 0 solid transparent;
    }
    .fixed-table-container thead th:first-child:not([data-not-first-th]) {
        border-left: none;
        border-top-left-radius: 4px;
        -webkit-border-top-left-radius: 4px;
        -moz-border-radius-topleft: 4px;
    }
    .fixed-table-container thead th .th-inner,
    .fixed-table-container tbody td .th-inner {
        padding: 8px;
        line-height: 24px;
        vertical-align: top;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .fixed-table-container thead th .sortable {
        cursor: pointer;
        background-position: right;
        background-repeat: no-repeat;
        padding-right: 30px;
    }
    .fixed-table-container thead th .both {
        background-image: url(' QMQ5AQBCF4dWQSJxC5wwax1Cq1e7BAdxD5SL+Tq/QCM1oNiJidwox0355mXnG/DrEtIQ6azioNZQxI0ykPhTQIwhCR+BmBYtlK7kLJYwWCcJA9M4qdrZrd8pPjZWPtOqdRQy320YSV17OatFC4euts6z39GYMKRPCTKY9UnPQ6P+GtMRfGtPnBCiqhAeJPmkqAAAAAElFTkSuQmCC');
    }
    .fixed-table-container thead th .asc {
        background-image: url('');
    }
    .fixed-table-container thead th .desc {
        background-image: url(' ');
    }
    .fixed-table-container th.detail {
        width: 30px;
    }
    .fixed-table-container tbody td {
        border-left: 1px solid #dddddd;
    }
    .fixed-table-container tbody tr:first-child td {
        border-top: none;
    }
    .fixed-table-container tbody td:first-child {
        border-left: none;
    }
    /* the same color with .active */
    .fixed-table-container tbody .selected td {
        background-color: #f5f5f5;
    }
    .fixed-table-container .bs-checkbox {
        text-align: center;
    }
    .fixed-table-container input[type="radio"],
    .fixed-table-container input[type="checkbox"] {
        margin: 0 auto !important;
    }
    .fixed-table-container .no-records-found {
        text-align: center;
    }
    .fixed-table-pagination div.pagination,
    .fixed-table-pagination .pagination-detail {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .fixed-table-pagination div.pagination .pagination {
        margin: 0;
    }
    .fixed-table-pagination .pagination a {
        padding: 6px 12px;
        line-height: 1.428571429;
    }
    .fixed-table-pagination .pagination-info {
        line-height: 34px;
        margin-right: 5px;
    }
    .fixed-table-pagination .btn-group {
        position: relative;
        display: inline-block;
        vertical-align: middle;
    }
    .fixed-table-pagination .dropup .dropdown-menu {
        margin-bottom: 0;
    }
    .fixed-table-pagination .page-list {
        display: inline-block;
    }
    .fixed-table-toolbar .columns-left {
        margin-right: 5px;
    }
    .fixed-table-toolbar .columns-right {
        margin-left: 5px;
    }
    .fixed-table-toolbar .columns label {
        display: block;
        padding: 3px 20px;
        clear: both;
        font-weight: normal;
        line-height: 1.428571429;
    }
    .fixed-table-toolbar .bs-bars,
    .fixed-table-toolbar .search,
    .fixed-table-toolbar .columns {
        position: relative;
        margin-top: 10px;
        margin-bottom: 10px;
        line-height: 34px;
    }
    .fixed-table-pagination li.disabled a {
        pointer-events: none;
        cursor: default;
    }
    .fixed-table-loading {
        display: none;
        position: absolute;
        top: 42px;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 99;
        background-color: #fff;
        text-align: center;
    }
    .fixed-table-body .card-view .title {
        font-weight: bold;
        display: inline-block;
        min-width: 30%;
        text-align: left !important;
    }
    /* support bootstrap 2 */
    .fixed-table-body thead th .th-inner {
        box-sizing: border-box;
    }
    .table th, .table td {
        vertical-align: middle;
        box-sizing: border-box;
    }
    .fixed-table-toolbar .dropdown-menu {
        text-align: left;
        max-height: 300px;
        overflow: auto;
    }
    .fixed-table-toolbar .btn-group > .btn-group {
        display: inline-block;
        margin-left: -1px !important;
    }
    .fixed-table-toolbar .btn-group > .btn-group > .btn {
        border-radius: 0;
    }
    .fixed-table-toolbar .btn-group > .btn-group:first-child > .btn {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }
    .fixed-table-toolbar .btn-group > .btn-group:last-child > .btn {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }
    .common-table .table > thead > tr > th {
        vertical-align: bottom;
        border-bottom: 1px solid #ddd;
    }
    /* support bootstrap 3 */
    .common-table .table thead > tr > th {
        /*padding: 0;
        margin: 0;*/
    }
    .common-table .fixed-table-footer tbody > tr > td {
        padding: 0 !important;
    }
    .common-table .fixed-table-footer .table {
        border-bottom: none;
        border-radius: 0;
        padding: 0 !important;
    }
    .common-table .pull-right .dropdown-menu {
        right: 0;
        left: auto;
    }
    /* calculate scrollbar width */
    p.fixed-table-scroll-inner {
        width: 100%;
        height: 200px;
    }
    div.fixed-table-scroll-outer {
        top: 0;
        left: 0;
        visibility: hidden;
        width: 200px;
        height: 150px;
        overflow: hidden;
    }
    /* for get correct heights  */
    .fixed-table-toolbar:after, .fixed-table-pagination:after {
        content: "";
        display: block;
        clear: both;
    }
    .fullscreen {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1050;
        width: 100%!important;
        background: #FFF;
    }
</style>